<template>
  <div>
    <br>
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" inline class="demo-ruleForm">
      <el-form-item prop="citys">
        <el-cascader
          placeholder="请选择省、市、县"
          :options="options"
          :props="props"
          v-model="ruleForm.citys"
          @change="cityChange"
          clearable></el-cascader>
      </el-form-item>

      <el-form-item prop="businessName">
        <el-input v-model="ruleForm.businessName" placeholder="请输入公寓名称" clearable></el-input>
      </el-form-item>
      <el-form-item prop="startTime">
        <el-date-picker
          v-model="ruleForm.startTime"
          align="right"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择起始交易日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      -
      <el-form-item prop="endTime">
        <el-date-picker
          v-model="ruleForm.endTime"
          align="right"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择结束交易日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">搜索</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1" @click="queryDetails('in')">收入明细</el-menu-item>
      <el-menu-item index="2" @click="queryDetails('out')">支出明细</el-menu-item>
    </el-menu>

    <div v-if="this.status=='out'">
      <el-card shadow="always">
        <el-descriptions border title="单位：元（RMB）">
          <el-descriptions-item label="支出金额总计"><b>{{ forStats.totalSum }}</b></el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-table
        :data="outTableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="businessName"
          label="公寓名称">
        </el-table-column>
        <el-table-column
          sortable
          prop="dzDate"
          label="交易时间">
        </el-table-column>
        <el-table-column
          prop="applyType"
          label="交易类型">
          <template slot-scope="scope">
            <span v-if="scope.row.applyType==2">
              提现
            </span>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          prop="applyAmount"
          label="金额（元）">
        </el-table-column>
        <el-table-column
          prop="checkUserName"
          label="操作人">
        </el-table-column>
      </el-table>
    </div>
    <div v-if="this.status=='in'">
      <div id="myChart" :style="{height: '230px'}"></div>
      <el-card shadow="always">
        <el-descriptions border title="单位：元（RMB）">
          <el-descriptions-item label="收入金额总计"><b>{{ forStats.totalSum }}</b></el-descriptions-item>
          <el-descriptions-item label="押金（总计）"><b>{{ forStats.depositSum }}</b></el-descriptions-item>
          <el-descriptions-item label="租金（总计）"><b>{{ forStats.rentSum }}</b></el-descriptions-item>
          <el-descriptions-item label="电费（总计）"><b>{{ forStats.electricitySum }}</b></el-descriptions-item>
          <el-descriptions-item label="水费（总计）"><b>{{ forStats.waterSum }}</b></el-descriptions-item>
          <el-descriptions-item label="宽带（总计）"><b>{{ forStats.netSum }}</b></el-descriptions-item>
          <el-descriptions-item label="燃气费（总计）"><b>{{ forStats.gasSum }}</b></el-descriptions-item>
          <el-descriptions-item label="有线电视（总计）"><b>{{ forStats.cableSum }}</b></el-descriptions-item>
          <el-descriptions-item label="其他（总计）"><b>{{ forStats.totalSum }}</b></el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="businessName"
          label="公寓名称">
        </el-table-column>
        <el-table-column
          sortable
          prop="dealDate"
          label="交易时间">
        </el-table-column>
        <el-table-column
          prop="total"
          sortable
          label="总计（元）">
        </el-table-column>
        <el-table-column
          sortable
          prop="deposit"
          label="押金（元）">
        </el-table-column>
        <el-table-column
          sortable
          prop="rent"
          label="租金（元）">
        </el-table-column>
        <el-table-column
          sortable
          prop="electricityFee"
          label="电费（元）">
        </el-table-column>
        <el-table-column
          sortable
          prop="waterFee"
          label="水费（元）">
        </el-table-column>
        <el-table-column
          sortable
          prop="netFee"
          label="宽带（元）">
        </el-table-column>
        <el-table-column
          sortable
          prop="gasFee"
          label="燃气费（元）">
        </el-table-column>
        <el-table-column
          sortable
          prop="cableFee"
          label="有线电视费">
        </el-table-column>
        <el-table-column
          sortable
          prop="otherFee"
          label="其他（元）">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="ruleForm.pageNum"
        :page-sizes="[1,7,10,20,50]"
        :page-size="ruleForm.pageSize"
        :page-count="pages"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog title="详情" :visible.sync="dialogTableVisible" width="80%">
      交易时间：{{ this.gform.qvDate }}<br>
      收入金额总计：{{ this.countMoney }}
      <el-table :data="gridData">
        <el-table-column label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column property="dealDate" label="交易时间"></el-table-column>
        <el-table-column property="roomName" label="房源名称"></el-table-column>
        <el-table-column property="tenantName" label="租客姓名"></el-table-column>
        <el-table-column property="tenantPhone" label="租客电话"></el-table-column>
        <el-table-column property="itemType" label="费用类型"></el-table-column>
        <el-table-column property="zt" label="收支状态"></el-table-column>
        <el-table-column property="realAmount" label="金额（元）"></el-table-column>
        <el-table-column property="payWay" label="支付方式"></el-table-column>
      </el-table>
      <el-row>
        <el-col :span="16">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
              :current-page="gform.pageNum"
              :page-sizes="[1, 5, 7, 10]"
              :page-size="gform.pageSize"
              :page-count="pages2"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total2">
            </el-pagination>
          </div>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" plain @click="changeDate(-1)">上一天</el-button>
          <el-button type="primary" plain @click="changeDate(1)">下一天</el-button>
        </el-col>
      </el-row>


    </el-dialog>


  </div>
</template>

<script>
import {getRegionList} from "@/api/housing/roomRack/roomRack";
import {
  getStatsList,
  apiCountAmount,
  getStats,
  getoutStats,
  getoutDetails,
  apiGetCwDetails
} from "@/api/finance/financialstatement/statement";
import Test from "@/views/benjamin/test/test";

export default {
  name: "index",
  components: {Test},
  mounted() {
    this.drawLine();
  },
  data() {
    return {
      countMoney: undefined,
      gform: {
        pageNum: 1,
        pageSize: 3,
        businessId: undefined,
        qvDate: undefined,
      },
      total2: 0,
      pages2: 0,
      dialogTableVisible: false,
      gridData: [],
      status: 'in',
      forStats: {},
      activeIndex: "1",
      options: [],
      tableData: [],
      ruleForm: {
        citys: [],
        pageNum: 1,
        pageSize: 7,
        provinceId: undefined,
        cityId: undefined,
        countyId: undefined,
        startTime: undefined,
        endTime: undefined,
      },
      total: 0,
      pages: 0,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      outTableData: [],
      citys: [],
      props: {
        label: 'name',
        value: 'id',
        checkStrictly: true
      },
      zhu: [],
    }
  },
  created() {
    this.getCityList();
    this.stats();
    this.statsList();
  },
  methods: {
    changeDate(val) {
      this.gform.pageNum = 1;
      console.log('日期改变', this.gform.qvDate);
      let date = new Date(this.gform.qvDate);
      console.log('日期加减', date)
      this.gform.qvDate = new Date(date.setDate(date.getDate() + val)).toLocaleDateString().replaceAll('/', '-');
      console.log('real', this.gform.qvDate)
      apiGetCwDetails(this.gform).then(res => {
        console.log(res);
        let msgData = res.msgData;
        this.gridData = msgData.list;
        this.total2 = msgData.total;
        this.pages2 = msgData.pages2;
      })
      apiCountAmount(this.gform).then(res => {
        console.log(res);
        this.countMoney = res.msgData.countAmount;
      })
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '收入明细金额统计',
          subtext: 'Real Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.zhu,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },
    queryDetails(val) {
      this.status = val;
      this.statsList();
      this.stats();
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.gform.pageNum = 1;
      this.gform.businessId = row.businessId;
      this.gform.qvDate = row.dealDate;
      console.log('模拟数据', row);
      apiGetCwDetails(this.gform).then(res => {
        console.log(res);
        let msgData = res.msgData;
        this.gridData = msgData.list;
        this.total2 = msgData.total;
        this.pages2 = msgData.pages2;
      })
      apiCountAmount(this.gform).then(res => {
        console.log(res);
        this.countMoney = res.msgData.countAmount;
      })
      this.dialogTableVisible = true;
    },

    statsList() {
      if (this.status == 'in') {
        getStatsList(this.ruleForm).then(res => {
          console.log('列表收入', res);
          this.tableData = res.msgData.list;
          this.total = res.msgData.total;
          this.pages = res.msgData.pages;
        })
      }
      if (this.status == 'out') {
        getoutDetails(this.ruleForm).then(res => {
          console.log('列表支出', res);
          this.outTableData = res.msgData.list;
          this.total = res.msgData.total;
          this.pages = res.msgData.pages;
        })
      }
    },
    stats() {
      if (this.status == 'in') {
        getStats(this.ruleForm).then(res => {
          console.log('列表统计', res)
          this.forStats = res.msgData;
          console.log('图', this.forStats)
          this.zhu = [];
          this.zhu.push({value: this.forStats.totalSum, name: '收入金额总计'});
          this.zhu.push({value: this.forStats.depositSum, name: '押金（总计）'});
          this.zhu.push({value: this.forStats.rentSum, name: '租金（总计）'});
          this.zhu.push({value: this.forStats.electricitySum, name: '电费（总计）'});
          this.zhu.push({value: this.forStats.waterSum, name: '水费（总计）'});
          this.zhu.push({value: this.forStats.netSum, name: '宽带（总计）'});
          this.zhu.push({value: this.forStats.gasSum, name: '燃气费（总计）'});
          this.zhu.push({value: this.forStats.cableSum, name: '有线电视（总计）'});
          this.zhu.push({value: this.forStats.totalSum, name: '其他（总计）'});
          this.drawLine();
        })
      }
      if (this.status == 'out') {
        console.log(123)
        getoutStats(this.ruleForm).then(res => {
          console.log('列表支出统计', res);
          this.forStats = res.msgData;
        })
      }
    },
    cityChange() {
      console.log(this.ruleForm.citys);
      if (this.ruleForm.citys.length == 0) {
        this.ruleForm.provinceId = '';
        this.ruleForm.cityId = '';
        this.ruleForm.countyId = '';
      }
      if (this.ruleForm.citys.length == 1) {
        this.ruleForm.provinceId = this.ruleForm.citys[0];
      }
      if (this.ruleForm.citys.length == 2) {
        this.ruleForm.provinceId = this.ruleForm.citys[0];
        this.ruleForm.cityId = this.ruleForm.citys[1];
      }
      if (this.ruleForm.citys.length == 3) {
        this.ruleForm.provinceId = this.ruleForm.citys[0];
        this.ruleForm.cityId = this.ruleForm.citys[1];
        this.ruleForm.countyId = this.ruleForm.citys[2];
      }
      this.ruleForm.pageNum = 1;
    },
    getCityList() {
      getRegionList().then(res => {
        this.options = res.msgData;
      })
    },
    submitForm(formName) {
      this.statsList();
      this.stats();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm.provinceId = '';
      this.ruleForm.cityId = '';
      this.ruleForm.countyId = '';
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.ruleForm.pageSize = val;
      this.ruleForm.pageNum = 1;
      this.statsList();
      this.stats();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.ruleForm.pageNum = val;
      this.statsList();
      this.stats();
    },
    handleSizeChange2(val) {
      console.log(`每页 ${val} 条`);
      this.gform.pageSize = val;
      this.gform.pageNum = 1;
      apiGetCwDetails(this.gform).then(res => {
        console.log(res);
        let msgData = res.msgData;
        this.gridData = msgData.list;
        this.total2 = msgData.total;
        this.pages2 = msgData.pages2;
      })
    },
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.gform.pageNum = val;
      apiGetCwDetails(this.gform).then(res => {
        console.log(res);
        let msgData = res.msgData;
        this.gridData = msgData.list;
        this.total2 = msgData.total;
        this.pages2 = msgData.pages2;
      })
    }
  }
}
</script>

<style scoped>

</style>
